<!-- 文章类型选择 -->
<template>
  <div>
    <van-action-sheet v-model="show" title="选择版块">
      <div class="type-content">
        <van-grid column-num="3" square>
          <van-grid-item v-for="(item, idx) in types" :key="idx" :icon="item.icon"  @click="onClick(idx)">
            <span class="type-text" slot="text">{{item.text}}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  name: 'ArticleType',
  props: {
    isShow: { type: Boolean, required: true },
    onChange: { type: Function, required: true }, // 状态切换
    onChose: { type: Function, required: true }, // 选择
    types: { type: Array, required: true }
  },
  data () {
    return {
    }
  },
  methods: {
    onClick (idx) {
      this.show = false
      this.onChose(idx)
    }
  },
  computed: {
    show: {
      get () {
        return this.isShow
      },
      set (newVal) {
        this.onChange(newVal)
      }
    }
  }
}
</script>

<style scoped>
.type-text{
  font-size: 14px;
  font-weight: bold;
}
</style>
